<template>
  <view :class="classNameList" @click="handleClick">
    <view class="_content">
      <view class="_img" v-if="detail && detail.imageUrl && !round">
        <x-image :src="detail.imageUrl"/>
      </view>
      <text>{{ detail.value || '立即购买' }}</text>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';
import { mapState } from 'vuex';

export default {
  name: 'PBuyButton',
  components: {
    XImage
  },
  props: {
    placement: {
      type: String,
      default: 'bottom'
    },
    detail: {
      type: Object,
      default: () => null
    },
    round: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      // 主题配色
      colorTheme: state => state['product'].pageModule?.colorTheme
    }),
    classNameList() {
      const classList = ['p-buy-button', `is-${this.placement}`];
      if (this.round) {
        classList.push('round');
      }
      return classList.join(' ');
    }
  },
  watch: {},
  created() {

  },
  methods: {
    // 格式化图片
    formatOss(url) {
      return this.$tools.formatOss(url);
    },
    handleClick() {
      // console.log(1, this.colorTheme);
      this.$emit('click', this.placement);
    }
  }
};
</script>

<style lang="scss">
.p-buy-button{
  background-color: #fff;
  ._content{ height: 100px; line-height: 100px; text-align: center; background: $uni-color-primary; font-size: 32px; color: #FFFFFF; display: flex; align-items: center; justify-content: center;}
  ._img{ width: 38px; height: 38px; margin-right: 16px; }

  &.is-middle{
    padding: 30px; margin-top: 16px;
    ._content{ border-radius: 10px; height: 88px; line-height: 88px;}
  }
  &.is-bottom{
    ._content{ margin-bottom: env(safe-area-inset-bottom);}
  }

  &.round{
    ._content{ border-radius: 50px; margin-top: 20px; margin-left: 24px; margin-right: 24px}
  }
}
</style>
